<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: orangered;
        }
    </style>
    <script src='./jquery-1.12.2.js'></script>
    <script>
        /**
         * jQuery当中提供了四组与动画相关的方法
         *    show/hide/toggle       height  width   opacity   display
         *    slideDown/slideUp/slideToggle
         *    fadeIn/fadeOut/fadeTo/fadeToggle
         *    animate()   // 第一个参数是对象
         *    animate({width:200,height:300},3000,function(){})
         *
         *    时间形式的字符串   fast(200)     normal(400)     slow(600)
         *  jQuery中所有的动画都支持时间和回调函数
         *
         */

        $(function () {
            var box = $('div');


            //上滑和下滑
                       $('input').first().on('click',function(){
                           box.slideUp(1000);
                       })
                       $('input:eq(1)').on('click',function(){
                           box.slideDown(1000);
                       })
                       $('input').last().on('click',function(){
                           box.slideToggle(1000);
                       })

            // 显示和隐藏
            // $('input').first().on('click', function () {
            //     box.show('fast');
            // })
            // $('input:eq(1)').on('click', function () {
            //     box.hide('fast');
            // })
            // $('input:eq(2)').on('click', function () {
            //     box.toggle('fast');
            // })
        });
    </script>

    <body>
        <input type="button" value="显示">
        <input type="button" value="隐藏">
        <input type="button" value="切换">
        <div></div>

    </body>

</html>